<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical"
    :collapse="isCollapse"
    @select="handleSelect"
    router
  >
    <div class="logo-container">
      <img v-if="!isCollapse" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original-wordmark.svg" class="logo">
      <img v-else src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg" class="logo-small">
    </div>
    <el-menu-item index="/dashboard">
      <el-icon><i class="fas fa-tachometer-alt"></i></el-icon>
      <template #title>仪表盘</template>
    </el-menu-item>
    <el-sub-menu index="services">
      <template #title>
        <el-icon><i class="fas fa-server"></i></el-icon>
        <span>服务配置</span>
      </template>
      <el-menu-item index="/ddns">
        <el-icon><i class="fas fa-globe"></i></el-icon>
        <span>动态DNS</span>
      </el-menu-item>
      <el-menu-item index="/proxy" disabled>
        <el-icon><i class="fas fa-random"></i></el-icon>
        <span>反向代理</span>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/settings" disabled>
      <el-icon><i class="fas fa-cog"></i></el-icon>
      <template #title>系统设置</template>
    </el-menu-item>
    <el-menu-item index="/about">
      <el-icon><i class="fas fa-info-circle"></i></el-icon>
      <template #title>关于</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const activeIndex = ref(route.path)

const handleSelect = (key) => {
  activeIndex.value = key
}
</script> 